<div class="p-h-md p-v bg-white box-shadow pos-rlt">
  <h3 class="no-margin">Datepickers</h3>
</div>
<div class="p-md" ng-controller="DatepickerDemoCtrl">

  <p>Add datepicker functionality with any form text input.</p>

  <div class="callout callout-info">
    <h4>Support for locales</h4>
    <p>This module leverages the <a href="http://docs.angularjs.org/api/ng.$locale">$locale</a> service. You just have to load the proper <a href="http://docs.angularjs.org/guide/i18n">i18n</a> file to seamlessly translate your datepickers.</p>
  </div>

  <pre class="bs-example-scope">$scope.selectedDate = {{selectedDate}}; // &lt;- {{ getType('selectedDate') }}
$scope.selectedDateAsNumber = {{selectedDateAsNumber}}; // &lt;- {{ getType('selectedDateAsNumber') }}
$scope.fromDate = {{fromDate}}; // &lt;- {{ getType('fromDate') }}
$scope.untilDate = {{untilDate}}; // &lt;- {{ getType('untilDate') }}
</pre>
  <div class="bs-example" style="padding-bottom: 24px;" append-source>
    <form name="datepickerForm" class="form-inline" role="form">
      <!-- Basic example -->
      <div class="form-group" ng-class="{'has-error': datepickerForm.date.$invalid}">
        <label class="control-label">Date <small>(as date)</small></label>
        <input type="text" class="form-control" ng-model="selectedDate" name="date" bs-datepicker>
      </div>
      <!-- Custom example -->
      <div class="form-group" ng-class="{'has-error': datepickerForm.date2.$invalid}">
        <label class="control-label">Date <small>(as number)</small></label>
        <input type="text" class="form-control" ng-model="selectedDateAsNumber" data-date-format="yyyy-MM-dd" data-date-type="number"  data-autoclose="true"  data-min-date="02/10/86" data-max-date="today" data-autoclose="1" name="date2" bs-datepicker>
      </div>
      <hr>
      <!-- Date range example -->
      <div class="form-group">
        <label class="control-label m-b">Date range <small>(dynamic)</small></label>
        <div class="form-group" class="col-xs-3">
          <input type="text" class="form-control" ng-model="fromDate"  data-max-date="{{untilDate}}" placeholder="From" bs-datepicker>
        </div>
        <div class="form-group" class="col-xs-3">
          <input type="text" class="form-control" ng-model="untilDate"  data-min-date="{{fromDate}}" placeholder="Until" bs-datepicker>
        </div>
      </div>
    </form>
  </div>


  <h2 id="datepickers-usage">Usage</h2>
  <p>Append a <code>bs-datepicker</code>attribute to any element to enable the directive.</p>
  <div class="callout callout-info">
    <h4>The module exposes a <code>$datepicker</code>service</h4>
    <p>Available for programmatic use (mainly in directives as it requires a DOM element).</p>
    <div class="highlight">
      <pre>
        <code class="javascript" highlight-block>
          var myDatepicker = $datepicker(element, ngModelController);
        </code>
      </pre>
    </div>
  </div>

  <h3>Options</h3>
  <p>Options can be passed via data-attributes on the directive or as an object hash to configure the service. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
  <div class="callout callout-info">
    <h4>This module supports exotic placement options!</h4>
    <p>You can position your select in corners (such as <code>bottom-left</code>) or any other combination two.</p>
    <p>Exotic placement options are not part of the Bootstrap's core, to use them you must use <code>bootstrap-additions.css</code> from the <a href="//github.com/mgcrea/bootstrap-additions" target="_blank">BootstrapAdditions</a> project. This project being not yet fully released, meanwhile, you can use the <a href="//mgcrea.github.io/angular-strap/static/styles/bootstrap-additions.min.css" target="_blank">development snapshot</a> compiled for these docs.</p>
  </div>
  <div class="table-responsive">
    <table class="table table-bordered table-striped">
      <thead>
        <tr>
          <th style="width: 100px;">Name</th>
          <th style="width: 100px;">type</th>
          <th style="width: 50px;">default</th>
          <th>description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>animation</td>
          <td>string</td>
          <td>am-fade</td>
          <td>apply a CSS animation powered by <code>ngAnimate</code></td>
        </tr>
        <tr>
          <td>placement</td>
          <td>string</td>
          <td>'bottom-left'</td>
          <td>how to position the typeahead - top | bottom | left | right, or any combination like bottom-left.</td>
        </tr>
        <tr>
          <td>trigger</td>
          <td>string</td>
          <td>'focus'</td>
          <td>how typeahead is triggered - click | hover | focus | manual</td>
        </tr>
        <tr>
          <td>html</td>
          <td>boolean</td>
          <td>false</td>
          <td>replace <code>ng-bind</code> with <code>ng-bind-html</code>, requires <code>ngSanitize</code> to be loaded</td>
        </tr>
        <tr>
          <td>delay</td>
          <td>number | object</td>
          <td>0</td>
          <td>
            <p>delay showing and hiding the typeahead (ms) - does not apply to manual trigger type</p>
            <p>If a number is supplied, delay is applied to both hide/show</p>
            <p>Object structure is:
              <code>delay: { show: 500, hide: 100 }</code>
            </p>
          </td>
        </tr>
        <tr>
          <td>container</td>
          <td>string | false</td>
          <td>false</td>
          <td>
            <p>Appends the typeahead to a specific element. Example:
              <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the typeahead in the flow of the document near the triggering element -&nbsp;which will prevent the typeahead from floating away from the triggering element during a window resize.</p>
          </td>
        </tr>
        <tr>
          <td>template</td>
          <td>path | id</td>
          <td>'$typeahead'</td>
          <td>
            <p>If provided, overrides the default template, can be either a remote URL or a cached template id.</p>
          </td>
        </tr>
        <tr>
          <td>dateFormat</td>
          <td>string</td>
          <td>'shortDate'</td>
          <td>
            <p>Rendering format of your date, leverages <a href="http://docs.angularjs.org/api/ng.filter:date">ng.filter:date</a>.</p>
          </td>
        </tr>
        <tr>
          <td>dateType</td>
          <td>string</td>
          <td>'date'</td>
          <td>
            <p>Expected model type of your date - date | number | iso | string</p>
          </td>
        </tr>
        <tr>
          <td>autoclose</td>
          <td>boolean</td>
          <td>false</td>
          <td>
            <p>Whether the picker should close itself upon select.</p>
          </td>
        </tr>
        <tr>
          <td>useNative</td>
          <td>boolean</td>
          <td>false</td>
          <td>
            <p>Whether to use a native component if available (iOS/Android).</p>
          </td>
        </tr>
        <tr>
          <td>minDate</td>
          <td>date*</td>
          <td>-Infinity</td>
          <td>
            <p>Minimum allowed date for selection <small>(* fed into the <code>Date</code> constructor)</small>. You can use the string "today" that will resolve the current date.</p>
          </td>
        </tr>
        <tr>
          <td>maxDate</td>
          <td>date*</td>
          <td>+Infinity</td>
          <td>
            <p>Maximum allowed date for selection <small>(* fed into the <code>Date</code> constructor)</small>. You can use the string "today" that will resolve the current date.</p>
          </td>
        </tr>
        <tr>
          <td>startView</td>
          <td>number</td>
          <td>0</td>
          <td>
            <p>View that sould be opened by default - 0 | 1 | 2.</p>
          </td>
        </tr>
        <tr>
          <td>minView</td>
          <td>number</td>
          <td>0</td>
          <td>
            <p>Minimum allowed view - 0 | 1 | 2. 1 will only allow month selection.</p>
          </td>
        </tr>
        <tr>
          <td>startWeek</td>
          <td>number</td>
          <td>1</td>
          <td>
            <p>First day of the week.</p>
          </td>
        </tr>
        <tr>
          <td>startDate</td>
          <td>date*</td>
          <td>today</td>
          <td>
            <p>Date that sould be opened by default.</p>
          </td>
        </tr>
        <tr>
          <td>iconLeft</td>
          <td>string</td>
          <td>'glyphicon glyphicon-chevron-left'</td>
          <td>
            <p>CSS class for 'left' icon.</p>
          </td>
        </tr>
        <tr>
          <td>iconRight</td>
          <td>string</td>
          <td>'glyphicon glyphicon-chevron-right'</td>
          <td>
            <p>CSS class for 'right' icon.</p>
          </td>
        </tr>
        <tr>
          <td>daysOfWeekDisabled</td>
          <td>string</td>
          <td>''</td>
          <td>
            <p>List of decimal days of the week values that are disabled and hence cannot be selected. For example, '06' disables Sunday and Saturday, '12345' disables Monday to Friday.</p>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="callout callout-info">
    <h4>Default options</h4>
    <p>You can override global defaults for the plugin with <code>$datepickerProvider.defaults</code></p>
    <div class="highlight">
      <pre class="bs-exemple-code">
        <code class="javascript" highlight-block>
          angular.module('myApp')
          .config(function($datepickerProvider) {
            angular.extend($datepickerProvider.defaults, {
              dateFormat: 'dd/MM/yyyy',
              startWeek: 1
            });
          })
        </code>
      </pre>
    </div>
  </div>

</div>
